<!-- 线性图 -->
<template>
  <div id="map">暂无数据...</div>
</template>

<script>
import echarts from 'echarts'
import { log } from 'util';
export default {
  props: ['mapData'],
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        color: ['#6E9CFA', '#FE5377', '#95FFEC', '#F86F91', '#5C8BFF', '#FCBE64', '#8BE0F0', '#9B81FB', '#FD765D', '#4AB664', '#F38AC3', '#AC71FF', '#F4E56E'],
        series: []
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    console.log(this.LineMap);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.flush()
  },
  methods: {
    refreshMap() {
      const myChart = echarts.init(document.getElementById('map'))
      myChart.setOption(this.option);
    },
    flush() {
      if (this.mapData && this.mapData.all) {
        this.option.xAxis.data = this.mapData.dataList
        const keyValue = Object.keys(this.mapData.all[0])[0]
        const dataY = this.mapData.all[0][keyValue]
        console.log(dataY);
        this.option.series = dataY.map(item => {
          return {
            name: item.legend,
            type: 'line',
            data: item.value,
            smooth: true,
          }
        })
        this.option.legend.data = dataY.map(v => v.legend)
        this.refreshMap()
      }
    }
  },
  watch: {
    mapData() {
      this.flush()
    }
  }
}
</script>
<style  scoped>
/* @import url(); 引入css类 */
#map {
  width: 100%;
  min-height: 430px;
}
</style>